spb/hilmacorp

1/**2 * Author: Simon-Pierre Boucher3 * Contact: contact@spboucher.ai4 * Project: Hilmacorp.ai — Web Platform5 * File: app/[locale]/contact/page.tsx6 * Description: Contact page — practical information cards and validated contact form7 */89import type { Metadata } from "next";10import Container from "@/components/Container";11import SectionHeading from "@/components/SectionHeading";12import ContactForm from "@/components/ContactForm";13import { getMessages, isLocale, type Locale } from "@/lib/i18n";1415export async function generateMetadata({16  params,17}: {18  params: Promise<{ locale: string }>;19}): Promise<Metadata> {20  const { locale } = await params;21  if (!isLocale(locale)) return {};22  const { meta } = getMessages(locale);23  return { title: { absolute: meta.contact.title }, description: meta.contact.description };24}2526export default async function ContactPage({27  params,28}: {29  params: Promise<{ locale: string }>;30}) {31  const { locale } = await params;32  const { contact } = getMessages(locale as Locale);3334  const infoCards = [35    {36      title: contact.infoEmailTitle,37      body: (38        <a39          href="mailto:contact@spboucher.ai"40          className="font-medium text-accent hover:text-accent-strong"41        >42          contact@spboucher.ai43        </a>44      ),45    },46    { title: contact.infoResponseTitle, body: contact.infoResponse },47    { title: contact.infoLanguagesTitle, body: contact.infoLanguages },48  ];4950  return (51    <>52      <section className="relative overflow-hidden border-b border-line">53        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />54        <Container className="relative py-20 sm:py-28">55          <SectionHeading as="h1" title={contact.title} lead={contact.lead} />56        </Container>57      </section>5859      <section className="py-16 sm:py-20">60        <Container className="grid gap-12 lg:grid-cols-[1fr_2fr]">61          <div className="flex flex-col gap-4">62            {infoCards.map((card) => (63              <div key={card.title} className="rounded-2xl border border-line bg-card p-6">64                <h2 className="font-mono text-xs uppercase tracking-[0.25em] text-ink-faint">65                  {card.title}66                </h2>67                <p className="mt-2.5 text-sm leading-relaxed text-ink-soft">{card.body}</p>68              </div>69            ))}70          </div>71          <div className="rounded-3xl border border-line bg-card p-8 shadow-sm sm:p-10">72            <ContactForm strings={contact.form} />73          </div>74        </Container>75      </section>76    </>77  );78}79